<template>
	<view id="form-box" class="form-box">
		<view>
			<!--      <view class="title">-->
			<!--        <view>-->
			<!--          活动结束时间-->
			<!--        </view>-->
			<!--      </view>-->
			<!--  <view class="time"><span>活动结束时间：</span>{{ timeData.hour }}:{{ timeData.minute }}:{{
          timeData.second
        }}
      </view> -->
			<view class="input-box">
				<!-- <text>手机号：</text> -->
				<input class="input" type="text" maxlength="11" @input="inputPhone" v-model="formData.phone"
					placeholder="请输入手机号码">
			</view>
			<!-- <view class="input-box"> -->
			<!-- <text>手机号：</text> -->
			<!-- <input class="input" type="text" maxlength="5" @input="inputPhone" v-model="formData.code"
					placeholder="请输入验证码">
				<view @click="sendCodeHandler" class="send-code">{{sendCodeText}}</view>
			</view> -->
		</view>
		<view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" src="/static/btn.png"></image>
		</view>
		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#a32a33" />
			</checkbox-group>
			<text class="text" @click="agreementChange">
				我已阅读并同意活动规则、<text class="tip-color" @click.stop="showAgreementHandler(1)">《订购须知》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(2)">《隐私政策》</text>
				等内容，限时享<br>停车券+省心黑金卡
			</text>
		</view>
	</view>
	<agreement v-if="isShowAgreement" :agreementType="agreementType" @ok="agreementOkHandler"></agreement>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import validParamsUtil from "@/utils/validParamsUtil";
	import messageUtil from "@/utils/messageUtil.js"
	import smsApi from "../../api/smsApi";
	import countDownUtil from "@/utils/countDownUtil.js"
	import orderApi from "../../api/orderApi";
	import userApi from "@/api/userApi.js"

	// import {
	// 	Form
	// } from "ant-design-vue";

	const formData = ref({
		username: '',
		phone: '',
		code: '',
		isAgreement: false,
	});

	const isShowAgreement = ref(false)
	const agreementType = ref(1) // 1-订购须知,2-隐私政策

	const sendCodeDownNumber = ref(0);
	const sendCodeText = ref('获取验证码')


	const props = defineProps(['param'])

	onMounted(() => {
		initShowTimeMethod()
	})

	const agreementChange = (e) => {
		formData.value.isAgreement = !formData.value.isAgreement;
	}

	const showAgreementHandler = (value) => {
		isShowAgreement.value = true;
		agreementType.value = value;
	}

	const agreementOkHandler = () => {
		isShowAgreement.value = false;

	}

	// const sendCodeHandler = () => {
	// 	if (!validParamsUtil.validPhone(formData.value.phone)) {
	// 		messageUtil.showFail('手机号不正确');
	// 		return;
	// 	}
	// 	if (!countDownUtil.valid(sendCodeDownNumber.value)) {
	// 		return;
	// 	}

	// 	smsApi.sendPaySms(formData.value.phone, res => {
	// 		messageUtil.showSuccess('短信发送成功')

	// 		sendCodeDownNumber.value = 60;
	// 		countDownUtil.start(sendCodeDownNumber.value, res => {
	// 			sendCodeDownNumber.value = res;
	// 			if (res <= 0) {
	// 				sendCodeText.value = '获取验证码';
	// 			} else {
	// 				sendCodeText.value = res;
	// 			}
	// 		})

	// 	})
	// }

	const submitMethod = () => {
		if (!validParamsUtil.validPhone(formData.value.phone)) {
			messageUtil.showFail('手机号格式不正确')
			return;
		}
		// formData.value.isAgreement = true;
		// if (!formData.value.checked) {
		//   Toast.fail('请先同意并阅读相关条款');
		//   return;
		// }
		// setTimeout(() => {
		// 	// if (!formData.value.username) {
		// 	//   Toast.fail('请输入姓名');
		// 	//   return;
		// 	// }
		// 	//
		// 	// sessionStorage.setItem('username', formData.value.username)
		// 	sessionStorage.setItem('phone', formData.value.phone)

		// 	route.push({
		// 		'path': 'confirm'
		// 	})
		// }, 1000)
		messageUtil.showLoading()

		// userApi.login(formData.value.phone, formData.value.code, loginRes => {
		orderApi.submitOrder(formData.value.phone, res => {
			messageUtil.closeLoading()
			messageUtil.showSuccess('处理成功')
			// #ifdef H5
			if (deviceUtil.isWeChatBrowser()) {
				setTimeout(() => {
					window.location.href =
						'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI2ODEzMjg1Mg==#wechat_redirect';
				}, 1500)

			}
			// #endif
		}, err => {
			messageUtil.closeLoading()
			messageUtil.showFail('处理失败')
		})
		// })


	}


	const inputPhone = () => {
		if (formData.value.phone.length == 11) {
			formData.value.isAgreement = true;
		}
	}

	const timeData = ref({
		lastTime: 0,
		hour: 23,
		minute: 59,
		second: 59,
	});

	const initShowTimeMethod = () => {
		let lastTime = new Date();
		lastTime.setHours(23);
		lastTime.setMinutes(59);
		lastTime.setSeconds(59);
		timeData.value.lastTime = lastTime.getTime();
		setInterval(() => {
			showTimeMethod();
		}, 1000);
	}

	const showTimeMethod = () => {
		var time_now = new Date(); // 获取当前时间
		time_now = time_now.getTime();
		var time_distance = timeData.value.lastTime - time_now; // 结束时间减去当前时间
		var int_day, int_hour, int_minute, int_second;
		if (time_distance >= 0) {
			// 天时分秒换算
			int_day = Math.floor(time_distance / 86400000)
			time_distance -= int_day * 86400000;
			int_hour = Math.floor(time_distance / 3600000)
			time_distance -= int_hour * 3600000;
			int_minute = Math.floor(time_distance / 60000)
			time_distance -= int_minute * 60000;
			int_second = Math.floor(time_distance / 1000)

			// 时分秒为单数时、前面加零站位
			if (int_hour < 10)
				int_hour = "0" + int_hour;
			if (int_minute < 10)
				int_minute = "0" + int_minute;
			if (int_second < 10)
				int_second = "0" + int_second;

			// 显示时间
			// time_d.innerHTML = int_day;
			timeData.value.hour = int_hour;
			timeData.value.minute = int_minute;
			timeData.value.second = int_second;
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		top: 132vw;
		width: 90%;
		margin-left: 5vw;
		position: absolute;

		// >view {
		// 	padding: 1.5rem 0 0.8rem;
		// 	background-size: 100% 100%;
		// }

	}

	.title {
		font-size: 2.2rem;
		color: #302c2d;
		font-stretch: normal;
		letter-spacing: .1rem;
		text-align: center;
		font-weight: 600;
		position: relative;


		// >view {
		// 	border-bottom: solid 0.8rem #ffed8b;
		// 	display: inline-block;
		// 	height: 2.1rem;
		// }
	}

	.time {
		text-align: center;
		font-size: 2rem;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: .1rem;
		color: #f9ebcc;
		margin-top: .5rem;
		margin-bottom: 1rem;

		span {
			font-size: 1rem;
		}
	}

	.input-box {
		width: 77vw;
		height: 80rpx;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		box-shadow: 1rpx 3rpx 3rpx 0rpx rgba(138, 83, 43, 0.56);
		border-radius: 58rpx;
		border: solid 4rpx #e5cb9f;


		text {
			font-size: .8rem;
			color: #000;
			text-align: right;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			letter-spacing: .1rem;
		}

		.input {
			flex-grow: 1;
			height: 80rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 45rpx;
			letter-spacing: 3rpx;
			color: #d19499;
			padding-left: 30rpx;

			&::-webkit-input-placeholder,
			&::-ms-input-placeholder {
				color: #4f4c45;
				font-size: 45rpx;
			}

			&::-webkit-input-placeholder {
				color: #4f4c45;
				font-size: 45rpx;
			}

			&::-moz-placeholder {
				color: #4f4c45;
				font-size: 45rpx;
			}

		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #bc5058;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-right: 20rpx;
		}
	}

	.clauze {
		width: 77vw;
		margin: 30rpx auto 0;
		text-align: center;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;


		color: #edd5bd;
		display: flex;

		.text {
			letter-spacing: 2rpx;
			font-size: 26rpx;
		}

		.tip-color {
			color: #ffffff;
			font-size: 28rpx;
		}
	}

	::v-deep(.van-checkbox__text) {
		color: #c8a561;
		font-size: .8rem;
	}

	.submit {
		width: 100%;
		margin: 0 auto;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			width: 77vw;
		}
	}
</style>
